<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>状态管理</title>

  <!-- Bootstrap -->
  <link href="<?php echo PUBLIC_PATH;?>bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<style type="text/css">
th{
  white-space: nowrap;
}

</style>
<body>
  <div class="container">
    <h2>主界面了</h2>
    <p>
      <button type="button" class="btn btn-primary btn-lg" data-action="listAll">多条数据查询接口</button>
      <button type="button" class="btn btn-primary btn-lg" data-action="listOne">单条数据查询接口</button>
      <button type="button" class="btn btn-primary btn-lg" data-action="putOne">单条数据更新接口</button>
      <button type="button" class="btn btn-primary btn-lg" data-action="deleteOne">单调数据删除接口</button>
    </p>

    <h2>接口列表</h2>

    <ul class="list-group">
      <li class="list-group-item">listAll接口  <a href="#">预览</a> </li>
      <li class="list-group-item">listAll接口</li>
      <li class="list-group-item">listAll接口</li>
      <li class="list-group-item">listAll接口</li>
    </ul>

  </div>
<!--查询所有数据的接口-->
  <div class="hide" id="listAll">
    <div class="row">
      <div class="col-md-12">
        <h2> 输出字段</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th style="width:10%">选择</th>
          <th style="width:90%">字段</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach($data as $rows =>$value):?>
        <tr>
        <td><input type="checkbox" checked></td>
        <td><?php echo $rows; ?></td>
        </tr>
        <?php endforeach;?>
      </tbody>
    </table></div>
    </div>
    <div class="divider"></div>
    <button type="button" class="btn btn-primary">生成</button>
  </div>

<!--查询单调数据的接口-->
  <div class="hide" id="listOne">
    <div class="row">
      <div class="col-md-5">
        <h2>输入字段</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th style="white-space: nowrap">选择</th>
          <th>字段</th>
          <th>查询条件</th>
          <th>查询区间</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach($data as $rows =>$value):?>
        <tr>
        <td><input type="radio"></td>
        <td><?php echo $rows; ?></td>
        <td>
        <select>
          <option>&gt</option>
          <option>&lt</option>
          <option>=</option>
          <option>%like</option>
          <option>like%</option>
          <option>%like%</option>
        </select>
        </td>
        <td class="from-to">
            <input type="text" placeholder="从" style="width:45%;line-height:normal;">
            <input type="text" placeholder="至" style="width:45%;line-height:normal;">
        </td>
        </tr>
        <?php endforeach;?>

      </tbody>
    </table>
  </div>
  <div class="col-md-2">
  </div>
      <div class="col-md-5">
        <h2> 输出字段</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>选择</th>
          <th>字段</th>

        </tr>
      </thead>
      <tbody>
        <?php foreach($data as $rows =>$value):?>
        <tr>
        <td><input type="checkbox" checked></td>
        <td><?php echo $rows; ?></td>
        </tr>
        <?php endforeach;?>
      </tbody>
    </table></div>
    </div>

    <div class="divider"></div>
    <button type="button" class="btn btn-primary">生成</button>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="<?php echo PUBLIC_PATH;?>bootstrap/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="<?php echo PUBLIC_PATH;?>artDialog/css/ui-dialog.css">
  <script src="<?php echo PUBLIC_PATH;?>artDialog/dist/dialog-min.js"></script>

  <script type="text/javascript">
      $(document).ready(function(){

        $('.btn').click(function(){
          var action=$(this).data('action');
          var content=$('#'+action+'').html();
          var d = dialog({
              title: '新增'+action+'接口',
              content: content
          });
          d.showModal();
          //弹窗显示

        })

      })

    </script>
</body>
</html>